<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-button type="primary" @click="adduser('添加角色')"
          >添加角色</el-button
        >
        <el-table :data="list" border style="width: 100%">
          <el-table-column align="center" label="下拉" width="50" type="expand">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              <el-row :gutter="24" v-for="item in row.children" :key="item.id">
                <el-col :span="6"
                  ><div class="grid-content bg-purple">
                    <el-tag type="" closable @close="del(item.id, row)">
                      {{ item.authName }}
                    </el-tag>
                    <i class="el-icon-caret-right"></i></div
                ></el-col>

                <el-col :span="18"
                  ><div class="grid-content bg-purple">
                    <el-row
                      v-for="(tag, index) in item.children"
                      :key="tag.id"
                      class="vcenter row-bottom"
                    >
                      <el-col :span="6">
                        <el-tag
                          closable
                          type="success"
                          @close="del(tag.id, row)"
                        >
                          {{ tag.authName }}
                        </el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-col>

                      <el-col :span="18">
                        <el-tag
                          v-for="tag in item.children[index].children"
                          :key="tag.id"
                          closable
                          type="warning"
                          @close="del(tag.id, row)"
                        >
                          {{ tag.authName }}
                        </el-tag>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="{ $index }">
              {{ $index }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="roleName"
            label="角色名称"
            width="150"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="roleDesc"
            label="角色描述"
          ></el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="操作" width="300">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              <div class="actions">
                <i
                  class="el-icon-edit-outline"
                  @click="bianji('编辑角色', row)"
                ></i>
                <i class="el-icon-delete" @click="deluser(row.id)"></i>

                <i class="el-icon-s-tools" @click="gettree(row)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分配权限 -->
        <el-dialog title="分配权限" :visible.sync="dialogFormVisible">
          <el-tree
            :data="data1"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="getQuanxian">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 添加编辑角色 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="角色名字" prop="roleName">
              <el-input
                type="text"
                v-model="ruleForm.roleName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleName">
              <el-input
                type="text"
                v-model="ruleForm.roleDesc"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getuserList, getqxListshu, getqx, delrolesApi, adduser, deluser, bjuser } from '@/api/quanxian'
export default {
  name: 'userQxList',
  data () {
    return {
      list: [],
      dialogVisible: false,
      ruleForm: {
        roleName: '',
        roleDesc: '',
        id: ''
      },
      rules: {
        roleName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        roleDesc: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ]
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      data1: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },

      roleId: '',//角色id,,
      title: ''
    }
  },
  created () {
    this.xuan()

  },
  computed: {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.title == '添加角色') {
            const res = await adduser({ roleName: this.ruleForm.roleName, roleDesc: this.ruleForm.roleDesc })
            console.log(res)
            this.dialogVisible = false
            this.xuan()
            this.ruleForm.roleName = ''
            this.ruleForm.id = ''
            this.ruleForm.roleDesc = ''
            this.$message.success('添加成功')
          } else {
            await bjuser(this.ruleForm)
            this.dialogVisible = false
            this.$message.success('修改编辑成功')
            this.ruleForm.roleName = ''
            this.ruleForm.id = ''
            this.ruleForm.roleDesc = ''
            this.xuan()
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },

    async xuan () {
      // 角色列表
      const res = await getuserList()
      console.log(res, 898989)
      this.list = res.data
      //获取-权限列表-树形结构
      const res1 = await getqxListshu()
      this.data1 = res1.data
    },
    async gettree (row) {
      // console.log(res, 7777)
      this.dialogFormVisible = true;
      this.roleId = row.id
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(row.children)
      })
    },

    async getQuanxian () {


      const res = await getqx(this.roleId, { rids: this.$refs.tree.getCheckedKeys().join(',') })
      this.dialogFormVisible = false;
      this.xuan()
      this.$message({
        message: '分配权限成功',
        type: 'success'
      });
    },
    del (perId, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        const res = await delrolesApi(row.id, perId)
        row.children = res.data
        this.$message({

          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    adduser (type) {
      this.title = type
      this.dialogVisible = true
    },
    bianji (type, row) {
      this.title = type
      this.dialogVisible = true
      this.ruleForm.roleName = row.roleName
      this.ruleForm.id = row.id
      this.ruleForm.roleDesc = row.roleDesc
    },
    deluser (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deluser(id)
        this.xuan()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }


}

</script>
<style lang='scss'  scoped>
i {
  margin: 0 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
